<template>
  <div class="wrapper">
    <van-nav-bar title="国开老年大学" left-arrow @click-left="onClickLeft" />
    <img class="Img-banner" src="@/assets/introduce/banner.png" alt />
    <van-tabs v-model="active" title-active-color="#ffa300">
      <van-tab title="介绍" class="tab_name">
        <h3>国家老年开放大学—_2020成人考大专/考本科</h3>
        <p>微课教程 从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域</p>
        <img src="@/assets/school/daxuexq.jpg" alt />
        <span>
          从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
          从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
          从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
          从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
          从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
        </span>
      </van-tab>
      <van-tab title="报名">
        <div class="exportitem">
          <img :src="proveimg" class="proveimg" v-if="isprove" @click="upprovefile(1)" />
          <div class="imgdiv" @click="upprovefile(1)" v-else>
            <p>头像</p>
            <img src="@/assets/introduce/touxiang.png" alt />
            <img src="@/assets/introduce/list3.jpg" />
          </div>
          <input type="file" style="display: none" ref="prove_file" @change="changeprovefile" />
        </div>
        <div class="exportitem1">
          <img :src="frontimg" class="frontimg" v-if="isfront" @click="upprovefile(2)" />
          <div class="imgdiv" @click="upidfront(2)" v-else>
            <img src="@/assets/introduce/bmxinxi.jpg" />
            <label>请上传身份证正面照</label>
            <input type="file" style="display: none" ref="id_front" @change="changeprovefile" />
          </div>
          <img :src="backimg" class="backimg" v-if="isback" @click="upprovefile(3)" />
          <div class="imgdiv" @click="upidback(3)" v-else>
            <img src="@/assets/introduce/bmxinxi.jpg" />
            <label>请上传身份证反面</label>
            <input type="file" style="display: none" ref="id_back" @change="changeprovefile" />
          </div>
        </div>
        <div class="information">
          <!-- 上传电话号 -->
          <div class="phone">
            <div class="shuru">
              联系电话
              <input type="text" placeholder="请输入你的手机号" v-model="mobile" />
            </div>
            <div class="zaici">
              再次输入
              <input type="text" placeholder="请再次输入你的手机号" v-model="modileas" />
            </div>
          </div>
          <!-- 健康状况 -->
          <div class="health" style="color:#fff;">
            <span>兴趣偏好(可多选)</span>
            <ul>
              <li
                
                @click="getItem(item.id,index)"
                ref="liId"
                v-for="(item,index) in tltie"
                :key="index"
                :class="{checkebox:arr.includes(index)}" 
              >{{item.name}}</li>
            </ul>
          </div>
          <div class="Interest">
            <span>兴趣偏好</span>
            <ul>
              <li v-for="(item,index) in list" :key="index" :class="{checked:item}" @click="radioChange(item,index)">{{item.name}}</li>
              <!-- <li>糖尿病</li>
              <li>心脏病</li>
              <li>高血脂</li>
              <li>心脑血管</li> -->
            </ul>
          </div>
          <div class="dibu_nav">
            <p>
              终身教育费用
              <span>￥2589</span>
            </p>
            <a href>@如矿金不足将向系统预借</a>
          </div>
          <div class="submit">
            <button @click="authentication">原价报名</button>
            <!-- <button @click="but">原价报名(￥2599)</button> -->
            <button>20万矿金的款报名实名￥590</button>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程">
        <div class="selection">
          <van-tabs
            v-model="activeCla"
            title-active-color="#ffa300"
            color="#000"
            swipe-threshold="5"
            line-height="5px"
            class="tabitem"
            background="#000"
            title-inactive-color="#fff"
            :border="false"
            :ellipsis="false"
          >
            <van-tab
              v-for="(item,index) in tltie1"
              :key="index"
              :title="item.name"
              :name="item.id"
              style="font-size: 18px !important"
            ></van-tab>
          </van-tabs>
          <div class="more" @click="more()">
            <label>更多</label>
          </div>
          <!-- <div class="tabswitchcontent"> -->
          <!-- <ul class="tabdiv">
              <li :class="{active:type==2?true:false}" @click="switchevent(2)">直播</li>
              <li :class="{active:type==1?true:false}" @click="switchevent(1)">视频</li>
          </ul>-->
          <template>
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              finished-text="没有更多了"
              @load="loadMore"
              :offset="10"
            >
              <div class="con-selection">
                <div class="con-div" v-for="(item,index) in name1" :key="index">
                  <img :src="item.img" alt />
                  <div class="con">
                    <span>{{item.name}}</span>
                  <p>
                    <span>￥{{item.price}}</span>
                  </p>
                  <p class="con-p">{{item.time}}</p>
                  </div>
                </div>
              </div>
            </van-list>
          </template>
        </div>
      </van-tab>
      <van-tab title="学历" class>
        <div class="Record">
          <ul>
            <li>看学历视频课程 轻松的学分</li>
            <li>集满学分自动兑换本科学历</li>
          </ul>
          <van-circle
            style="margin-left:150px;"
            v-model="currentRate"
            size="120px"
            :stroke-width="150"
            :rate="50"
            :speed="120"
          />
          <ol>
            <li>已完成学分124</li>
            <li>未完成学分124</li>
          </ol>
          <!-- <div class="Certif" > -->
          <!-- <p></p> -->
          <van-cell class="cell" title="查看" @click="showShare = true" color="#fff" />
          <van-share-sheet v-model="showShare" title="立即分享" :options="options" @select="onSelect" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import axios from "axios";
import { Toast } from "vant";
import {Pub,Sign,List,Taglist,Qinun,Certificate} from "../../request/api";
import { registerSchool } from "@/request/register"
export default {
  name: "",
  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "寄给他", icon: "qrcode" }
      ],
      num:0,
      list:[
        {name:"心脏搭桥",},
        {name:"糖尿病", },
        {name:"心脏病",},
        {name:"心肌梗", },
        {name:"心脑血管"},
      ],
      modileas:"",
      activeCla: 0,
      checkBox: [],
      clickAll: false,
      activeClass: 2,
      proveimg: "" /*缩略图*/,
      frontimg: "",
      backimg: "",
      token: "",
      type: 1,
      provekey: "",
      frontkey: "",
      backkey: "",
      mobile: "",
      code: "",
      majorid: "1",
      isprove: false,
      isfront: false,
      isback: false,
      activeClass: -1,
      active: 0,
      checked: true,
      currentRate: 0,
      name: [],
      name1: [],
      tltie: [],
      tltie1: [],
      name2: [],
      Certif: [],
      asd: [],
      qwe: [],
      tids: "",
      hids: "",
      healthy_status:"",
      tablist: [],
      contentlist: [],
      loading: false,
      finished: false,
      page: 1, //请求第几页
      pageSize: 10, //每页请求的数量
      total: 0, //总共的数据条数
      userid: "111",
      type1:0,
      arr : [],
      show:false,
    };
  },
  props: {},
  components: {},
  mounted() {
    // token获取
    Qinun().then(res => {
      // console.log(res.data.data);
      this.int1 = res.data.data;
    });
    let Certi = {
      uid: 1
    };
    Certificate(Certi).then(res => {
      console.log(res);
      this.Certif = res.data.data;
    });
    // 老年大学课程页面学历课程
    let ject = {
      uid: 1,
      major_id: -1,
      page: 1
    };
    Pub(ject).then(res => {
      console.log(res);
      // this.name = res.data.data.lock;
      this.name1 = res.data.data.unlock;
      // this.name = res.data.data
    });
    // 老年大学课程报名标签列表参数及接口
    let obj = {
      uid: 3,
      type: 1
    };
    Taglist(obj).then(res => {
      console.log(res.data.data);
      this.tltie = res.data.data;
    });
    let obj1 = {
      uid: 3,
      type: 3
    };
    Taglist(obj1).then(res => {
      console.log(res.data.data);
      this.tltie1 = res.data.data;
    });
    //老年大学报名接口
    Sign({
      // uid: 1,
      tids: 1,
      type:0,
      tel: this.modileas,
      healthy_status: 0,
      hids: 2,
      pay_price:2599,
      photo: this.photo,
      just_img: this.just_img,
      back_img: this.back_img,
    }).then(res => {
      if(res.code == 200){
        Toast(res.message)
        console.log(res.code)
      }
      console.log(res);
    });
  },

  methods: {
     radioChange:function (item,i) {
      //  this.show=false;
       console.log(item,i)
                  this.n=i;         //控制选项与数据同步
            },
    // checkBox(item,index){
    //   console.log(item,index)
    // },
    loadMore() {
      console.log(this.contentlist.length);
      console.log(this.total);
      if (this.contentlist.length < this.total) {
        this.page++;
        this.getcontentlist();
      }
    },
    more() {},
    switchevent: function(type) {
      this.type = type;
      this.contentlist = [];
      this.page = 1;
    },
    upprovefile: function(type) {
      this.$refs.prove_file.click();
      this.type = type;
    },
    changeprovefile: function(e) {
      var that = this;
      const files = e.target.files;
      let filename = files[0].name; //只有一个文件
      if (filename.lastIndexOf(".") <= 0) {
        return alert("Please add a valid image!"); //判断图片是否有效
      }
      const fileReader = new FileReader(); //内置方法new FileReader()   读取文件
      fileReader.addEventListener("load", () => {
        if (that.type == 1) {
          that.proveimg = fileReader.result;
        }
        if (that.type == 2) {
          that.frontimg = fileReader.result;
        }
        if (that.type == 3) {
          that.backimg = fileReader.result;
        }
      });
      fileReader.readAsDataURL(files[0]);
      if (that.type == 1) {
        that.proveimg = files[0];
      }
      if (that.type == 2) {
        that.frontimg = files[0];
      }
      if (that.type == 3) {
        that.backimg = files[0];
      }
      const axiosInstance = axios.create({ withCredentials: false });
      let data = new FormData();
      data.append("token", that.int1); //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
      data.append("file", files[0]);
      axiosInstance({
        method: "POST",
        url: "https://upload-z1.qiniup.com", //上传地址
        data: data,
        timeout: 30000 //超时时间，因为图片上传有可能需要很
      })
        .then(data => {
          console.log(files[0]);
          if (that.type == 1) {
            that.photo = data.data.key;
            // console.log(that.phone);
            that.isprove = true;
          }
          if (that.type == 2) {
            that.just_img = data.data.key;
            // console.log(that.just_img);
            that.isfront = true;
          }
          if (that.type == 3) {
            that.back_img = data.data.key;
            // console.log(that.back_img);
            that.isback = true;
          }
        })
        .catch(function(err) {});
    },
    upidfront: function(type) {
      this.$refs.id_front.click();
      this.type = type;
    },
    upidback: function(type) {
      this.$refs.id_back.click();
      this.type = type;
    },
    /*提交审核*/
    authentication: function() {
      var that = this;
      if (that.photo == "") {
        Toast("请上传工作证或职称证明！");
        return false;
      }
      if (that.just_img == "") {
        Toast("请上传身份证正面照！");
        return false;
      }
      if (that.back_img == "") {
        Toast("请上传身份证反面照！");
        return false;
      }
      if (that.mobile == "") {
        Toast("手机号码不能为空！");
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(that.modileas)) {
        Toast("手机号码有误，请重填");
        return false;
      }
      if(that.healthy_status === 0){

      }
    },
    authentication() {
      var tids = this.asd.join(",");
      var hids = this.qwe.join(".");
      let host = "http://oss.dayinyun.com/";
      registerSchool({
          // uid: "3",
          tids: tids,
          type: this.type1,
          tel: this.mobile,
          healthy_status: 1,
          hids: hids,
          pay_price:2599,
          photo: host + this.photo,
          just_img: host + this.just_img,
          back_img: host + this.back_img,
        }).then(res => {
          let result = res.data;
          console.log(result)
          if (result.code === 200) {
            window.location.href = result.data.pay_url;
          } else {
            Toast(result.message);
          }
        });
    },
    getItem(num) {
      this.successshow=false;
      if(this.arr.includes(i)){
          //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
          //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
         this.arr=this.arr.filter(function (ele){return ele != i;});
        }else{
                this.arr.push(i+1);
        }
      // this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
      var titledata = this.tltie;
      var titlearray = this.asd;
      for (var i = 0; i < titledata.length; i++) {
        if (titledata[i].id == num) {
          titledata[i].flag = true;
          console.log(titledata[i].id);
          titlearray.push(titledata[i].id);
          console.log(titlearray);
        }
      }
      this.asd = titlearray;
      this.tltie = titledata;
      // this.tltie[i].flag = !this.tltie[i].flag
      // if (this.tltie[i].flag) {
      //   this.asd.push(this.tltie[i])
      //   console.log(this.asd)
      // }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    }
  },
  watch: {}
};
</script>

<style scoped>
/* .active{
  color: red;
} */
/* 课程tab */
.tabswitch {
  height: 88px;
  padding-left: 20px;
  font-size: 36px !important;
}
.tabdiv {
  width: 100%;
  height: 88px;
  background: #303030;
  display: flex;
  flex-direction: row;
}
.tabdiv li {
  width: 50%;

  text-align: center;
  line-height: 88px;
  font-size: 34px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.active {
  background: rgba(254, 163, 0, 1);
}
.more {
  position: absolute;
  right: 50px;
  top: 0;
  background: #000000;
  color: #ffffff;
  height: 88px;
  line-height: 88px;
  display: flex;
  flex-direction: row;
}
.more {
  position: absolute;
  right: 0px;
  top: 88px;
  background: #000000;
  color: #ffffff;
  height: 88px;
  line-height: 88px;
  display: flex;
  flex-direction: row;
}
.more img,
.more label {
  display: block;
}
.more img {
  width: 29px;
  height: 29px;
  margin-top: 30px;
  margin-right: 10px;
}
.more label {
  font-size: 27px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 68px;
  margin-right: 5px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.tabswitch {
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  line-height: 88px;
}
/* .active {
  color: #1e82d2;
  font-weight: bolder;
} */
.van-nav-bar__title{
  color: #fff;
}
html,
body,
#app {
  /* height: 100%; */
  /* background: #000; */
}
* {
  background: #000;
  margin: 0;
  padding: 0;
}
.van-tabs >>> .van-tabs__nav--line {
  padding-bottom: 20px;
  background: #000;
  border: none;
}
.Img-banner {
  margin: 10px 0 0 20px;
  margin-left: 20px;
  width: 720px;
  height: 346px;
}
.Head-portrait {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 100%; */
  height: 170px;
  background: #000;
  border-bottom: 1px solid #eee;
}
.Head-portrait .xxx input {
  border: 1px solid #fff;
}
.Head-portrait .xxx {
  /* width: 50px; */
  display: flex;
  justify-content: space-around;
}
.Head-portrait .xxx > img {
  width: 115px;
  height: 115px;
}
.Head-portrait .xxx > img:nth-of-type(2) {
  margin-right: 10px;
  width: 38px;
  height: 70px;
  margin-top: 20px;
}
.information {
  height: 600px;
  background: #000;
}
.information .card .inpu2 {
  border: 1px solid #fff;
  width: 200px;
  height: 222px;
}
.information .card .inpu1 {
  border: 1px solid red;
  width: 200px;
  height: 222px;
  /* opacity: 0; */
  /* filter: alpha(opacity=0); */
  font-size: 100px;
  position: absolute;
  top: 0;
  right: 0;
}
.information .card {
  /* overflow: hidden; */
  position: relative;
  width: 750px;
  height: 289px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 8px;
  margin-top: 7px;

  /* border-bottom: 1px solid #eee; */
}
.information .card > img {
  width: 335px;
  height: 222px;
  /* margin: 0 0 0 5px; */
}
.phone {
  color: #fff;
  width: 100%;
  height: 235px;
}
.phone .shuru {
  /* width: 100%; */
  margin-left: 18px;
  height: 113px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  margin-top: 5px;
  font-size: 35px;
}
.phone .shuru > input {
  border: none;
}
.phone .zaici {
  font-size: 35px;
  /* width: 100%; */
  margin-left: 18px;
  height: 113px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  margin-top: 5px;
}
.phone .zaici > input {
  border: none;
  /* height: 40px; */
}
/* 底部提交按钮 */
.submit {
  height: 100px;
  border-bottom: 1px solid #666666;
}
.submit button:nth-of-type(1) {
  background: #ffa300;
  width: 240px;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  border: none;
  text-align: center;
  color: #fff;
}
.submit button:nth-of-type(2) {
  background: #fe0000;
  width: 510px;
  color: #fff;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  text-align: center;
  border: none;
}
.dibu_nav {
  height: 130px;
  position: relative;
}
.dibu_nav p {
  font-size: 35px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  margin-left: 23px;
}
.dibu_nav a {
  position:absolute;
  top: 60px;
  right: 0;
  font-size: 27px;
  color: red;
}
.Interest {
  padding: 20px;
  height: 160px;
}
.Interest span {
  margin: 0 0 0 20px;
  font-size: 35px;
  color: #fff;
}
.Interest ul {
  /* height: 700px; */
  display: flex;
  flex-wrap: wrap;
}
.Interest ul li {
  border-bottom: 1px solid #666666;
  color: #fff;
  font-size: 26px;
  margin: 20px 0 0 20px;
  width: 110px;
  height: 53px;
  line-height: 53px;
  /* border: 1px solid #000; */
  background: #232323;
  text-align: center;
  border-radius: 15px;
  /* margin: 5px 0 0 10px; */
}
.Interest ul li:hover{
  background:red;
}
.Interest ul li.checked{
  /* color:#0CF; */
}
.Interest ul li.checked:before{ 
  background-color:#0CF; 
  border:1px #fff solid;
}
.health {
  /* padding: 20px; */
  margin-top: 40px;
  height: 800px;
  /* border: 1px solid #fff; */
}
.health span {
  margin: 0 0 0 20px;
  font-size: 35px;
}
.health ul {
  /* margin-top: 10px; */
  /* width: 610px; */
  height: 700px;
  display: flex;
  flex-wrap: wrap;
}
.health ul li {
  font-size: 26px;
  margin: 30px 0 0 20px;
  width: 180px;
  height: 53px;
  line-height: 53px;
  /* border: 1px solid #000; */
  background: #232323;
  text-align: center;
  border-radius: 15px;
  /* margin: 5px 0 0 10px; */
}
/* .health ul li .active{
  background: red;
  font-weight: bolder;

} */
.health ul li .checkebox{
  background: red;
}
.health ul li:hover{
  /* color: #1e82d2; */
  background: red;
}
/* 介绍部分整体样式 */
.tab_name {
  font-size: 36px;
  padding: 22px;
  color: #fff;
}
.tab_name > p {
  margin-top: 34px;
  font-size: 30px;
}
.tab_name > img {
  width: 688px;
  height: 376px;
}
.tab_name > span {
  margin-top: 34px;
  font-size: 30px;
}
/* 底部按钮 */
.dibuOK {
  width: 750px;
  height: 327px;
  background: #000;
  /* border: 1px solid #fff; */
}
.dibuOK ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32px;
}
.dibuOK button {
  width: 750px;
  height: 103px;
  font-size: 32px;
  color: #fff;
  background: #fd0000;
  border: none;
}
.dibuOK ul li {
  margin-top: 30px;
}
.dibuOK ul li:nth-of-type(2) {
  color: red;
  border: none;
}
/* 课程部分样式 */
.selection {
  height: 100%;
  /* border: 1px solid #fff; */
  display: flex;
  flex-wrap: wrap;
  color: #fff;
}
.selection span {
  font-size: 35px;
}
.selection .con-selection {
  width: 350px;
  height: 360px;
  /* border: 1px solid #fff; */
  padding: 10px;
  position: relative;
}
.con-selection .con-p {
  font-size: 12px;
  position: absolute;
  top: 186px;
  right: 0;
}
.con-selection{
  display: flex;
  padding: 20px;
  /* justify-content: space-around; */
}
.con-selection .con-div{
  width: 380px;
  /* border: 1px solid #fff; */
  margin-left: 15px;
  /* padding: 15px; */
}

.con-selection .con-div img{
  width: 340px;
  height: 226px;
}
.con-selection .con p{
  margin-top: 15px;
}
.con-selection .con{
  margin-top: 20px;
}
.con-selection .con-div span{
  font-size: 35px;
  margin-top: 30px;
  /* padding: 20px; */
}

.van-cell__title span {
  margin: 20px auto;
}
.van-cell__title {
  font-size: 20px;
  height: 195px;
  background: #fff;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(196, 197, 200, 0.219);
  color: #fff;
}
.cell span {
  margin: 40px auto;

}
/* 学历 */
.Record {
  /* height: 800px; */
  color: #fff;
}
.Record ul {
  /* width: 750px; */
  height: 163px;
  /* display: flex; */
  margin: 40px 0 0 170px;
}
.Record ul li:nth-of-type(1) {
  font-size: 35px;
  flex-direction: column;
}
.Record ul li:nth-of-type(2) {
  font-size: 31px;
  flex-direction: column;
  margin: 15px 0 0 30px;
}
.Record ol {
  margin: 30px 0 0 190px;
}
.Record ol li:nth-of-type(1) {
  flex-direction: column;
  font-size: 35px;
  margin: 0 0 0 80px;
}
.Record ol li:nth-of-type(2) {
  font-size: 31px;
  flex-direction: column;
  margin: 10px 0 0 92px;
}
.exportitem {
  width: 90%;
  margin: 0 auto;
  /* border-bottom: 1px solid #aaaa(83, 67, 67, 0.335); */
  /* padding-bottom: 30px; */
}
.exportitem .imgdiv,
.proveimg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #aaaa;
  /* display: block; */
  width: 100%;
  height: 160px;
}
.exportitem .imgdiv img:nth-of-type(1) {
  width: 117px;
  height: 120px;
  /* margin-left: 190px; */
}
.exportitem .imgdiv img:nth-of-type(2) {
  width: 75px;
  height: 70px;
  display: block;
  margin: 0 auto;
}
.exportitem .imgdiv p {
  width: 550px;
  font-size: 28px;
  color: #fff;
}
.exportitem .imgdiv label {
  display: block;
  font-size: 28px;
  font-family: PingFang-SC-Medium;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 30px;
}
.exportitem1 {
  width: 90%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  margin-top: 30px;
  margin-left: 55px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 30px;
}
.exportitem1 .imgdiv,
.frontimg,
.backimg {
  display: block;
  width: 48%;
  height: 230px;
  background: rgba(35, 35, 35, 1);
  opacity: 1;
  border-radius: 10px;
  margin-right: 4%;
}
.exportitem1 .imgdiv img,
.exportitem1 .imgdiv label {
  display: block;
}
.exportitem1 .imgdiv img {
  width: 160px;
  height: 110px;
  margin: 0 auto;
  margin-top: 30px;
}
.exportitem1 .imgdiv label {
  font-size: 28px;
  font-family: PingFang-SC-Medium;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 30px;
}

/* body{margin:0;}
.box{ margin:150px 150px;}
.Interest  ul{
    padding:0; 
    list-style:none;
}
.Interest ul li{
    width:50px; height:30px; display:inline-block;
    text-align:center; line-height:30px;
    cursor:pointer;margin-left:5px;
}
.Interest ul li:before{ 
    display:inline-block; width:10px; height:10px; 
    line-height:10px; content:""; border:1px #000 solid; 
    margin-right:2px; transition:all 0.3s linear;
}   
.Interest ul li.checked:before{ 
    background-color:#0CF; 
    border:1px #fff solid;
}
.Interest ul li.checked{color:#0CF;} */
</style>